<template>
  <div>
    <el-row>
      <el-col :span="8">
        <div id="device-status" class="chart"></div>
      </el-col>
      <el-col :span="8">
        <div id="order-status" class="chart"></div>
      </el-col>
      <el-col :span="8">
        <div id="quality-status" class="chart"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div id="production-efficiency" class="chart"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Dashboard',
  mounted() {
    this.initDeviceStatusChart();
    this.initOrderStatusChart();
    this.initQualityStatusChart();
    this.initProductionEfficiencyChart();
  },
  methods: {
    initDeviceStatusChart() {
      const chart = echarts.init(document.getElementById('device-status'));
      const option = {
        title: { text: '设备状态概览', left: 'center' }, // 设置标题居中
        tooltip: { trigger: 'item' },
        legend: { top: '10%', left: 'center' },
        series: [
          {
            name: '设备状态',
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
              { value: 20, name: '运行中' },
              { value: 5, name: '停机' },
              { value: 4, name: '维修中' },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    initOrderStatusChart() {
      const chart = echarts.init(document.getElementById('order-status'));
      const option = {
        title: { text: '订单状态概览', left: 'center' }, // 设置标题居中
        tooltip: { trigger: 'item' },
        legend: { top: '10%', left: 'center'},
        series: [
          {
            name: '订单状态',
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
              { value: 40, name: '待生产' },
              { value: 20, name: '生产中' },
              { value: 30, name: '已完成' },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    initQualityStatusChart() {
      const chart = echarts.init(document.getElementById('quality-status'));
      const option = {
        title: { text: '质量状态概览', left: 'center' }, // 设置标题居中
        tooltip: { trigger: 'item' },
        legend: { top: '10%', left: 'center' },
        series: [
          {
            name: '质量状态',
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
              { value: 40, name: '合格' },
              { value: 5, name: '不合格' },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    initProductionEfficiencyChart() {
      const chart = echarts.init(document.getElementById('production-efficiency'));
      const currentDate = new Date();
      const dates = [];
      const data = [];

      // 计算前7天的日期
      for (let i = 7; i > 0; i--) {
        const date = new Date();
        date.setDate(currentDate.getDate() - i);
        dates.push(this.formatDate(date));
        // 假设每个日期对应的生产效率数据，实际情况你可能需要从后端获取
        data.push(Math.floor(Math.random() * 100));
      }

      const option = {
        title: { text: '生产效率趋势', left: 'center' },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: dates },
        yAxis: { type: 'value' },
        series: [
          {
            name: '生产效率',
            type: 'line',
            data: data,
          },
        ],
      };
      chart.setOption(option);
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
    },
  },
};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
  margin-top: 10px;
}
</style>
